﻿<template>
  <div style="height:100%">
    <!--表2季度生产情况T_MulQuartProduc-->
    <div class="divSearch" style="padding: 6px;">
      <Row>
        <Col span="24" class="col-margin"> 填报年度：
        <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
          <Option value="">全部</Option>
          <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
        </Select> 时间周期：
        <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
          <Option value="">全部</Option>
          <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
        </Select>
        <Button icon="ios-search" type="ghost" @click="getPageData()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
          查询
        </Button>
        </Col>
      </Row>
    </div>
    <Row style="padding:10px;">
      <Col span="24" class="col-margin">
      <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
      </Col>
    </Row>
    <Row>
      <Col span="24" class="dataTable">
      <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer='' @on-page-size-change="getPageSize" show-total="" show-elevator=""></Page>
      </Col>
    </Row>
    <Modal v-model="showType" :mask-closable="false" width='1500'>
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">养蚕收益情况填报</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size="25"></Icon>
      </p>
      <Row style="padding:2px 0 5px; 0">
        <Col>
        <Button icon="plus" type="ghost" size="small" @click="addItem">新增</Button>
        </Col>
      </Row>
      <table class="reptable" style="width:100%">
        <tr>
          <th rowspan="2">农户<br/>姓名</th>
          <th rowspan="2">桑地<br/>类型</th>
          <th rowspan="2">树龄</th>
          <th rowspan="2">种植<br/>规格</th>
          <th rowspan="2">桑园<br/>海拔</th>
          <th rowspan="2">剪伐<br/>方式</th>
          <th rowspan="2">桑园面积(亩)</th>
          <th colspan="4">养蚕量(张)</th>
          <th colspan="4">鲜茧产量(kg)</th>
          <th colspan="4">鲜茧价格(元/kg)</th>
          <th colspan="2">蚕沙</th>
          <th rowspan="2">操作</th>
        </tr>
        <tr>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>产量<br/>(公斤)</th>
          <th>价格<br/>(元/公斤)</th>
        </tr>
        <tr v-for="dataitem in datalist">
          <td style="text-align:right;width:6%;">
            <Input v-model="dataitem.HouseName"></Input>
          </td>
          <td style="text-align:left;width:2%;">
            <Input style="display:none;" v-model="dataitem.Id"></Input>
            <Input style="display:none;" v-model="dataitem.ReportId"></Input>
            <Select v-model="dataitem.SanType">
              <Option :value="item.DictValue" v-for="item in MulLandList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
          </td>
  
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.Age"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.PlantSanc"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.Elevation"></Input>
          </td>
          <td style="width:4%;">
            <Select v-model="dataitem.CutMethod">
              <Option :value="item.DictValue" v-for="item in CutMethodList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.MulArea"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormSpring"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormSummer"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormIsAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormLateAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.FreshSpring"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.FreshSummer"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.FreshIsAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.FreshLateAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.PriceSpring"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.PriceSummer"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.PriceIsAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.PriceLateAutumn"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormYield"></Input>
          </td>
          <td style="text-align:right;width:4%;">
            <Input v-model="dataitem.SilkwormPrice"></Input>
          </td>
          <td style="text-align:center;width:4%;">
            <Button type="ghost" size="small" icon="ios-trash-outline" style="color:#FF0000" @click="delOp(dataitem)">
            </Button>
          </td>
        </tr>
      </table>
      <div style="text-align:right;padding-top:10px">
        <Button type="primary" @click="save()">保存</Button>
        <Button type="ghost" @click="cancel()" style="margin-left: 8px">取消</Button>
      </div>
      <div slot="footer">
          <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
              备注：1、“桑地类型”、“剪伐方式”请在选择框内进行选择；
              <br/><br/>2、种植规格指桑树的株行距；
              <br/><br/>3、桑园面积指调查对象所拥有的桑园总面积；
              <br/><br/>4、蚕沙产量指售出的蚕沙重量，若没有售出，请填0； 
          </Alert>
      </div>
    </Modal>
    <Modal v-model="ViewShow" :mask-closable="false" width="1500">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">养蚕收益情况填报</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size="25"></Icon>
      </p>
      <table class="reptable" style="width:100%">
        <tr>
          <th rowspan="2">农户<br/>姓名</th>
          <th rowspan="2">桑地<br/>类型</th>
          <th rowspan="2">树龄</th>
          <th rowspan="2">种植<br/>规格</th>
          <th rowspan="2">桑园<br/>海拔</th>
          <th rowspan="2">剪伐<br/>方式</th>
          <th rowspan="2">桑园面积(亩)</th>
          <th colspan="5">养蚕量(张)</th>
          <th colspan="5">鲜茧产量(kg)</th>
          <th colspan="5">鲜茧价格(元/kg)</th>
          <th colspan="2">蚕沙</th>
          <th rowspan="2">平均亩桑效益(元/亩)</th>
          <th rowspan="2">平均张种效益（元/张）</th>
        </tr>
        <tr>
          <th>合计</th>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>合计</th>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>均价</th>
          <th>春</th>
          <th>夏</th>
          <th>正秋</th>
          <th>晚秋</th>
          <th>产量<br/>(公斤)</th>
          <th>价格<br/>(元/公斤)</th>
        </tr>
        <tr v-for="dataitem in datalist" style="height:40px;" :key="dataitem.Id">
          <td style="text-align:center;width:6%;padding: 4px 7px;">
            {{dataitem.HouseName}}
          </td>
          <td style="text-align:center;width:4%;padding: 4px 7px;">
             {{dataitem.SanType|omgConvDict('MulLandType')}}
          </td>
  
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.Age}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.PlantSanc}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.Elevation}}
          </td>
          <td style="width:4%;text-align:center;padding: 4px 7px;">
            {{dataitem.CutMethod |omgConvDict('LoggingType')}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.MulArea}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormSpring+dataitem.SilkwormSummer+dataitem.SilkwormIsAutumn+dataitem.SilkwormLateAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormSpring}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
             {{dataitem.SilkwormSummer}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormIsAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormLateAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.FreshSpring}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.FreshSummer}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.FreshIsAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.FreshLateAutumn}}
          </td>
          <!--均价-->
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{convertNum(((dataitem.PriceSpring*dataitem.FreshSpring)+(dataitem.PriceSummer*dataitem.FreshSummer)+(dataitem.PriceIsAutumn*dataitem.FreshIsAutumn)+(dataitem.PriceLateAutumn*dataitem.FreshLateAutumn))/(dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn))}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.PriceSpring}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.PriceSummer}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.PriceIsAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.PriceLateAutumn}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormYield}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{dataitem.SilkwormPrice}}
          </td>
          <!--平均亩桑效益（元/亩）-->
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{convertNum(
              ((((dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn)*
                  (((dataitem.PriceSpring*dataitem.FreshSpring)+(dataitem.PriceSummer*dataitem.FreshSummer)+(dataitem.PriceIsAutumn*dataitem.FreshIsAutumn)+(dataitem.PriceLateAutumn*dataitem.FreshLateAutumn))/(dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn))
              ))+(dataitem.SilkwormYield*dataitem.SilkwormPrice))/dataitem.MulArea
            )}}
          </td>
          <td style="text-align:right;width:4%;padding: 4px 7px;">
            {{convertNum(
              ((((dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn)*
                  (((dataitem.PriceSpring*dataitem.FreshSpring)+(dataitem.PriceSummer*dataitem.FreshSummer)+(dataitem.PriceIsAutumn*dataitem.FreshIsAutumn)+(dataitem.PriceLateAutumn*dataitem.FreshLateAutumn))/(dataitem.FreshSpring+dataitem.FreshSummer+dataitem.FreshIsAutumn+dataitem.FreshLateAutumn))
              ))+(dataitem.SilkwormYield*dataitem.SilkwormPrice))/(dataitem.SilkwormSpring+dataitem.SilkwormSummer+dataitem.SilkwormIsAutumn+dataitem.SilkwormLateAutumn)
            )}}
          </td>
        </tr>
      </table>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
            备注：1、“桑地类型”、“剪伐方式”请在选择框内进行选择；
            <br/><br/>2、种植规格指桑树的株行距；
            <br/><br/>3、桑园面积指调查对象所拥有的桑园总面积；
            <br/><br/>4、蚕沙产量指售出的蚕沙重量，若没有售出，请填0； 
        </Alert>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const validateNumber = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        if (value < 18) {
          callback(new Error('必须年满18岁'));
        } else {
          callback();
        }
      }
    };
    return {
      datalist: [],
      datas: {}, //table数据对象
      dataIds: [],
      CutMethodList: this.GetGroupDict("LoggingType"),
      MulLandList: this.GetGroupDict("MulLandType"),
      TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
      CreateYearList: this.GetGroupDict("ReportYear"), //上报年份
      CycleList: this.GetGroupDict("ReportCycle"), //周期
      pageSizeOpts: [20, 40, 50], //默认分页最大设置
      showType: false, //编辑框弹出状态
      ViewShow: false,
      selectTabName: '',
      ReportId: '',
      TabTitleList: [], //tab选项卡列表
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: 'MulSerEarnSurvey',
        FillInYear: '',
        TimesType: '',
        AreaCode: '',
        PageNumber: 1,
        PageSize: 20
      },
      ctx: this, //table数据上下文
      columnsList: [{
        title: "报表名称",
        key: "ReportName",
      },
      {
        title: "填报年度",
        key: "FillInYearName",
      },
      {
        title: "属行政区划",
        key: "AreaCodeName",
      },
      {
        title: "填报周期",
        key: "TimesTypeName",
      },
      {
        title: "状态",
        key: "StatusName",
        render:(h,params)=>{
            switch (params.row.Status * 1) {
                case 0: //审核未通过
                    return h('span',{class:{Error:true}},params.row.StatusName);
                case 1: //未填写
                    return h('span',{class:{NoReport:true}},params.row.StatusName);
                case 2: //已填写
                    return h('span',{class:{AlreadyReport:true}},params.row.StatusName);
                case 3: //已上报
                    return h('span',{class:{UpReport:true}},params.row.StatusName);                                    
                case 4: //审核通过
                    return h('span',{class:{Success:true}},params.row.StatusName);                                    
                case 5: //锁定
                    return h('span',{class:{error:true}},params.row.StatusName);                                    
                default:
                    return h('span',{class:{Default:true}},params.row.StatusName);                                    
            }
        }
      },
      {
        title: "新增时间",
        key: "StrAddTime",
      },
      {
        title: "填报时间",
        key: "StrUpdateTime",
      },
      {
        title: "操作",
        key: "Id",
        width: 250,
        align: 'center',
        render:(h, params)=> {
            return h('div',[
                h('Button',{
                    class:{ieditColor:true},
                    props:{
                        type:'ghost',size:'small',icon:'ios-paper-outline'
                    },
                    style:{
                        marginRight:'5px'
                    },
                    on:{
                        click:()=>{
                            this.showInfo(params.row.Id,params.row.ReportCode)
                        }
                    }
                },'查看'),
                h('Button',{
                    class:{irefreshColor:true},
                    props:{
                        type:'ghost',size:'small',icon:'ios-compose',disabled:params.row.Status>2
                    },
                    style:{
                        marginRight:'5px'
                    },
                    on:{
                        click:()=>{
                            this.editInfo(params.row.Id,params.row.ReportCode)
                        }
                    }
                },'填报'),
                h('Button',{
                    class:{ieditColor:true},
                    props:{
                        type:'ghost',size:'small',icon:'upload',disabled:params.row.Status!=2
                    },
                    style:{
                        marginRight:'5px'
                    },
                    on:{
                        click:()=>{
                            this.upReport(params.row.Id)
                        }
                    }
                },'上报'),
            ])
        }
      }
      ],
      clientHeight: window.innerHeight - 260, //表格默认高度
    }
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 260;
      })()
    };
  },
  methods: {
    convertNum:function(num){ //小数点处理
      if(isNaN(num)){
        return '0';
      }
      return num.toFixed(2);
    },
    addItem() {
      var model = { //编辑模型
        Id: 0,
        ReportId: '',
        HouseName: '',
        SanType: '',
        Age: '',
        PlantSanc: '',
        Elevation: '',
        CutMethod: '',
        MulArea: '',
        SilkwormSpring: '',
        SilkwormSummer: '',
        SilkwormIsAutumn: '',
        SilkwormLateAutumn: '',
        FreshSpring: '',
        FreshSummer: '',
        FreshIsAutumn: '',
        FreshLateAutumn: '',
        PriceSpring: '',
        PriceSummer: '',
        PriceIsAutumn: '',
        PriceLateAutumn: '',
        SilkwormYield: '',
        SilkwormPrice: '',
        AverageBenefit: '',
      };
      model.ReportId = this.ReportId;
      model.Id = this.datalist.length + 1;
      this.datalist.push(model);
    },
    delOp(m) {
      for (var i = 0; i < this.datalist.length; i++) {
        if (this.datalist[i].Id == m.Id) {
          this.datalist.splice(i, 1);
        }
      }
    },
    upReport(id) {
      var self = this;
      self.$Modal.confirm({
        title: '提示信息',
        content: '<p>是否确认上报？</p>',
        onOk: () => {
          var model = new Object();
          model.Id = id;
          model.reportType = '3';
          model.strMsg = '';
          this.$http.post("Report/PostUpStatus", model).then(
            function (res) {
              if (res.data.status == 1) {
                self.$Notice.success({
                  title: '已上报！',
                  desc: false
                });
                self.getPageData();
              } else {
                self.$Modal.error({
                  title: "提示信息",
                  content: "数据删除失败!!!"
                });
              }
            }
          );
        }
      });
    },
    getTab(name) {
      this.selectTabName = name;
    },
    //查看报表
    showInfo(id, reportCode) {
      var self = this;
      this.$http.get("Report", {
        params: {
          id: id,
          reportCode: reportCode
        }
      }).then( //获取数据编辑项的值
        function (res) {
          switch (res.data.list.status) {
            case 1:
              self.datalist = res.data.list.model;
              self.ViewShow = true;
              break;
            case 0:
              self.$Modal.error({
                title: "提示信息",
                content: "编辑数据加载失败!!!"
              });
              break;
            case -1:
              self.$Modal.error({
                title: "提示信息",
                content: "编辑数据加载失败!!!"
              });
              break;
          }
        }
        );
    },
    //获取当前页码
    getPageNumber(pageIndex) {
      this.searchModel.PageNumber = pageIndex;
      this.getPageData();
    },
    //获取当前分页大小
    getPageSize(pageSize) {
      this.searchModel.PageSize = pageSize;
      this.getPageData();
    },
    //获取this.datas: {},//table数据对象
    getPageData() {
      var self = this;
      var user = this.GetlocaStorage("CSuserinfo");
      this.searchModel.AreaCode = user.AreaCode;
      self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
        if (res.data.status === 1) {
          self.datas = res.data;
        } else {
          self.$Modal.error({
            title: '提示信息',
            content: res.data.message
          });
        }
      });
    },
    //编辑获取对象传入id
    editInfo(id, reportCode) { //编辑
      this.ReportId = id;
      var self = this;
      this.$http.get("Report", {
        params: {
          id: id,
          reportCode: reportCode
        }
      }).then( //获取数据编辑项的值
        function (res) {
          switch (res.data.list.status) {
            case 1:
              self.datalist = res.data.list.model;
              self.modalShow();
              break;
            case 0:
              self.$Modal.error({
                title: "提示信息",
                content: "编辑数据加载失败!!!"
              });
              break;
            case -1:
              self.$Modal.error({
                title: "提示信息",
                content: "编辑数据加载失败!!!"
              });
              break;
          }
        }
        );
    },
    checkItem(datas, ItemCode) {
      var res = false;
      for (var i = 0; i < datas.length; i++) {
        if (datas[i].ItemCode == ItemCode) {
          res = true;
        }
      }
      return res;
    },
    //保存方法
    save() {
      var self = this;
      this.$http.post('MulSerEarnSurvey', self.datalist).then(
        function (res) {
          if (res.data.status == 1) {
            self.getPageData(); //读取分页数据
            self.modalHide(); //关闭modal
            self.datalist = [];
            self.$Notice.success({
              title: '保存成功！',
              desc: false
            });
          } else {
            self.$Modal.warning({
              title: "提示信息",
              content: "更新失败,请与管理员联系!"
            });
          }
        });
    },
    //编辑框打开
    modalShow() {
      this.showType = true;
    },
    //编辑框关闭
    modalHide() {
      this.showType = false;
    },
    //取消方法
    cancel() {
      this.showType = false; //关闭modal
      this.TabTitleList = [];
    },
    //重置model
    restModel(modelname) {
      this.$refs[modelname].resetFields(); //重置model
    }
  },
  //创建Vue页面方法
  created: function () {
    //创业Vue前调用获取this.datas: {},//table数据对象
    this.getPageData();
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
}
</script>